<template>
	<view class="pagesBox">
		<u-avatar size="200"></u-avatar>
		<view class="line"></view>
		<view class="title1">申请获取以下权限</view>
		<view class="title2">获得你的公开信息（昵称、头像等）</view>
		<view class="submitBox">
			<view class="btn btn1" hover-class="btnHover1" @click="toLoginBefore">授权登录</view>
			<view class="btn btn2" hover-class="btnHover2" @click="backHandle">暂不登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				pageBack:''
			}
		},
		onLoad(options) {
			this.pageBack = options.pageBack || '';
			this.getCode()
		},
		methods: {
			getCode(){
				uni.login({
					success: (res)=> {
						this.code = res.code
					}
				})
			},
			toLoginBefore(){
				if(this.time){
					clearTimeout(this.time);
					this.time = '';
				}
				uni.showLoading({
					title:'登录中',
						mask:true
				})
				this.time = setTimeout(()=>{
					this.toLogin();
				},1000)
			},
			async toLogin(e) {
				let res = await uni.$http('POST','user/wxlogin',{code:this.code})
				console.log('登录',res);
				uni.hideLoading()
				uni.$u.toast(res.msg)
				if(res.code == 1){
					uni.setStorageSync('token',res.data.token);
					uni.setStorageSync('uid',res.data.uid);
					setTimeout(()=>{
						if(res.data.is_phone == 1){
							uni.navigateBack()
						}else{
							uni.navigateTo({
								url:"/pages/index/auth/wxPhone?pageBack=login"
							})
						}
					},1000)
				}else{
					this.getCode()
				}
			},
			backHandle(){
				if(this.pageBack == 'home'){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding-top: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.imageBox{
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #FFFFFF;
		box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.2);
		margin: 0 auto;
	}
	.line{
		width: 690rpx;
		height: 4rpx;
		background: #DDDDDD;
		border-radius: 2rpx;
		margin-top: 90rpx;
	}
	.title1{
		color: #000;
		font-size: 36rpx;
		margin-top: 50rpx;
	}
	.title2{
		color: #999999;
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.submitBox{
		width: 100%;
		margin-top: 80rpx;
		letter-spacing: 2rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.btn{
			width: 80%;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			background-color: #00a30a;
			border-radius: 40rpx;
			margin-bottom: 40rpx;
		}
		.btn2{
			color: #747474;
			background-color: #cbcbcb;
			border-radius: 40rpx;
		}
		.btnHover1{
			background-color: #008d07;
		}
		.btnHover2{
			color: #FFFFFF;
			background-color: #ababab;
		}
	}
}
</style>
<style>
	page{
		background-color: #F7F8FA;
	}
</style>